<template>
    <div class="user-list">
        <CuSerTop :Tab="tab"></CuSerTop>
        <div class="search">
            <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch">
                <template #action>
                    <div @click="onSearch">搜索</div>
                </template>
            </van-search>
        </div>
        <ul class="list">
            <li>
                <div>
                    <img
                        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202103%2F07%2F20210307164110_abe67.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641306265&t=222edc9f602573cdbf1a3513f1267821"
                        alt
                    />
                    <span>张全有</span>
                </div>
                <van-icon name="arrow" />
            </li>
        </ul>
    </div>
</template>
 
<script>
import CuSerTop from '@/components/CareUser/CareUserTop'
//搜索
import Vue from 'vue';
import { Search } from 'vant';
Vue.use(Search);
//图标
import { Icon } from 'vant';
Vue.use(Icon);

export default {
    components: {
        CuSerTop
    },
    data() {
        return {
            //头部
            tab: { title: '选择客户', righttext: <van-icon name="wap-home" />, path: '/homes' },
        }
    }
}
</script>
 
<style lang = "less" scoped>
.user-list {
    height: 100vh;
    background: #f5f5f5;
    /deep/.search {
        width: 100%;
        background: white;
        .van-search {
            margin: 0 30px;
            .van-search__content {
                border-radius: 50px;
            }
            .van-cell {
                padding: 20px 0;
                align-items: center;
                .van-field__left-icon {
                    margin: 0 20px;
                }
            }
            .van-search__action {
                color: blue;
                font-weight: 700;
                margin-left: 10px;
            }
        }
    }
    .list {
        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20px 0;
            padding: 0 30px;
            background: white;
            div:nth-child(1) {
                padding: 20px 0;
                display: flex;
                align-items: center;
                img {
                    height: 100px;
                    width: 100px;
                    border-radius: 50%;
                }
                span {
                    margin-left: 30px;
                    font-size: 30px;
                }
            }
        }
    }
}
</style>